<template>
  <el-dialog :close-on-click-modal="false" :visible.sync="dialogVisible" :title="curId ? '编辑权限' : '新增权限'"
             width="700px" :before-close="close"
  >
    <el-form ref="ruleForm" label-position="left  " :model="ruleForm" status-icon :rules="rules" label-width="100px"
             class="demo-ruleForm"
    >
      <el-form-item label="权限名" prop="name">
        <el-input v-model="ruleForm.name" clearable/>
      </el-form-item>
      <el-form-item label="权限标识" prop="sign">
        <el-input v-model="ruleForm.sign" clearable/>
      </el-form-item>
      <el-form-item label="是否为菜单" prop="isMenu">
        <el-switch
          v-model="ruleForm.isMenu"
          active-text="是"
          inactive-text="否"
        />
      </el-form-item>
      <template v-if="ruleForm.isMenu===false">
        <el-form-item label="请求方法" prop="method">
          <el-select v-model="ruleForm.method" clearable placeholder="选择请求方法">
            <el-option
              v-for="item in permissionMethods"
              :key="item.value"
              :label="item.value"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="请求路径" prop="path">
          <el-input v-model="ruleForm.path" clearable/>
        </el-form-item>
      </template>
      <el-form-item label="父权限" prop="parentID">
        <treeselect
          v-model="ruleForm.parentID"
          :options="treeData"
          style="width: 178px"
          placeholder="选择父权限"
        />
      </el-form-item>
      <el-form-item label="图标" prop="icon">
        <el-input v-model="ruleForm.icon" clearable/>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model="ruleForm.sort" clearable/>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input v-model="ruleForm.description" clearable/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import {
  getPermission,
  updatePermission,
  createPermission,
  getPermissionMethods,
  getMenu
} from '@/api/system/permissions'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { cleanNull } from '@/utils/filters'

export default {
  name: 'CuForm',
  components: { Treeselect },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    curId: {
      type: Number,
      default: null
    }
  },

  data() {
    return {
      ruleForm: {
        name: '',
        sign: '',
        isMenu: true,
        method: '',
        path: '',
        parentID: null,
        description: ''
      },
      permissionMethods: [],
      rules: {
        name: [{ required: true, trigger: 'blur', message: '权限名不能为空' }],
        sign: [{ required: true, trigger: 'blur', message: '权限标识不能为空' }],
        isMenu: [{ required: true, trigger: 'blur', message: '是否为菜单不能为空' }],
        method: [{ required: true, trigger: 'blur', message: '请求方法不能为空' }],
        path: [{ required: true, trigger: 'blur', message: '请求路径不能为空' }]
      },
      treeData: []
    }
  },
  watch: {
    dialogVisible(v) {
      if (v) {
        if (this.curId) {
          getPermission(this.curId).then(res => {
            this.ruleForm = res.data
          })
        }
        // 获取请求方法
        this.getMethod()
      }
    }
  },
  created() {
    this.getTree()
  },
  methods: {
    // 获取Tree列表
    getTree() {
      getMenu(this.form).then(res => {
        this.treeData = res.data
        this.treeData = cleanNull(this.treeData)
      })
    },
    close() {
      this.$refs.ruleForm.resetFields()
      this.ruleForm.method = ''
      this.ruleForm.path = ''
      this.$emit('close')
    },
    search() {
      this.close()
      this.$emit('search')
    },
    getMethod() {
      getPermissionMethods().then(res => {
        this.permissionMethods = res.data
      })
    },
    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.curId) {
            if (!this.ruleForm.parentID) {
              this.ruleForm.parentID = null
            }
            if (this.ruleForm.isMenu === true) {
              this.ruleForm.method = ''
              this.ruleForm.path = ''
            }
            updatePermission(this.ruleForm).then(res => {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.search()
            })
          } else {
            createPermission(this.ruleForm).then(res => {
              this.$message({
                message: '新增成功',
                type: 'success'
              })
              this.search()
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
